/*公共css函数*/
@mixin flexRow {
    display: flex;
    align-items: center;
}

@mixin flexColumn {
    display: flex;
    flex-direction: column;
}

// 常用的flex布局样式
@mixin alignCenter($justify: center) {
    display: flex;
    align-items: center;

    @if ($justify) {
        justify-content: $justify;
    }
}

@mixin justifyCenter($justify: center) {
    display: flex;
    justify-content: $justify;
}

@mixin direction($align:(), $justify:()) {
    display: flex;
    flex-direction: column;

    @if($align=='align') {
        align-items: center; //左右居中
    }

    @if($justify=='justify') {
        justify-content: center; //上下居中
    }
}

// 宽高
@mixin wh($width, $height) {
    width: $width;
    height: $height;
}

//显示多行，省略号
@mixin ellipsis($row: 1) {
    /* 显示两行，省略号 */
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $row;
    line-clamp: $row;
    -webkit-box-orient: vertical;
}

//单行，省略号
@mixin uniline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 文字超出隐藏
@mixin textEli {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

// 图片background: url()
@mixin bgUrl($name, $w, $h) {
    width: $w;
    height: $h;
    background: url("@/assets/images/"+$name) no-repeat;
    background-size: $w, $h;
}

@mixin absolute($z: 99) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: $z;
}

@mixin boxSizing {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

// 老生常谈的 1px 问题
// 下边框
@mixin borderTopBot($borderColor, $type: bottom) {
    position: relative;

    &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;

        @if ($type=="top") {
            top: 0;
        }

        @if ($type=="bottom") {
            bottom: 0;
        }

        width: 100%;

        @if ($type=="top") {
            border-top: 1px solid $borderColor;
        }

        @if ($type=="bottom") {
            border-bottom: 1px solid $borderColor;
        }

        transform: scaleY(0.5);
    }

    //引用方法  @include borderBottom-1px(#c1b5b5);
}

// 四边都有边框及圆角
@mixin border-1px ($color, $radius) {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid $color;
        border-radius: rem($radius);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }

    //引用方法 @include border-1px(#c1b5b5,5);
}

// 清除边框
@mixin border-none() {
    &:before {
        display: none;
    }
}

//iPhone X、iPhone XR、iPhone XS Max、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max适配
@mixin iphoneAdaptive($name: "p", $n: "") {
    @if ($name=="p") {
        /* 可以通过增加padding-bottom来适配 */
        padding-bottom: constant(safe-area-inset-bottom);
        /*兼容 IOS<11.2*/
        padding-bottom: env(safe-area-inset-bottom);
        /*兼容 IOS>11.2*/
    }

    @else if($name=="m") {
        /* 可以通过margin-bottom来适配 */
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
    }

    @else if($name=="h") {
        /* 或者改变高度*/
        height: calc(#{$n} + constant(safe-area-inset-bottom));
        height: calc(#{$n} + env(safe-area-inset-bottom));
    }
}